<template>
    <div class="login">
        <div class="box">
            <div class="form-control">
                <label for="">用户名</label>
                <my-input v-model="form.user" placeholder="请输入用户名"></my-input>
            </div>
             <div class="form-control">
                <label for="">密码</label>
                <my-input v-model="form.password" placeholder="请输入密码"></my-input>
                <button @click="sendCode" :disabled="disabled">{{btnMsg}}</button>
            </div>
            <button @click="login">登录</button>
            
        </div>
    </div>
</template>
<script>
import myInput from '../components/myInput'
import {reactive,ref,toRefs} from 'vue'
import {useRouter} from 'vue-router'
export default {
    setup(props) {
        const {push} = useRouter()
        const data = reactive({
            form:{
                user:'',
                password:'',
            },
            btnMsg:'发送验证码',
            disabled:false,//按钮的禁用状态  false 不禁用
           

        })
        const login=()=>{
            if(data.form.user =='' || data.form.password==''){
                alert('不能为空')
                return
            }
            localStorage.setItem('token',data.form.user)
            push('/home')

        }
        const sendCode=()=>{
            // Math.random()   获取到0-1之前的随机数  【0,1）
            console.log(Math.random()*10000);
            // 给密码框赋值
            data.form.password = parseInt(Math.random()*10000)
            //  按钮禁用
            data.disabled = true
            let count = 10
            let timer = setInterval(()=>{
                if(count>0){
                    count--
                    data.btnMsg = `${count}s后再试`

                }else{
                    clearInterval(timer)
                    data.btnMsg = '发送验证码'
                    data.disabled = false
                }
            },1000)
        }
        return {...toRefs(data),login,sendCode}
    },
    components:{
        myInput
    }
    
}
</script>
<style lang="scss" scoped>
.login{
    width:100%;
    height: 100vh;
    background: skyblue;
    display: flex;
    align-items: center;
    justify-content: center;
    .box{
        width:500px;
       height: 240px;
        border-radius: 10px;
        background: #ffff;
        padding:30px;
        .form-control{

            display: flex;
            align-items: center;
            margin-top:10px;
            label{
                width:70px;
            }
        }
    }
}
</style>
